﻿<p>
    <div class="playAutdio" style="border: 1px solid #ebebeb; background-color: #fcfcfc; overflow: hidden; padding: 12px 0;">
        <style type="text/css">
            .audioplayer {
                height: 2.5em;
                color: #8c8c8c;
                position: relative;
                z-index: 1;
            }

                .audioplayer > div {
                    position: absolute;
                }

            .audioplayer-title {
                margin-left: 3em;
            }

            .audioplayer-playpause {
                width: 2.5em;
                height: 100%;
                text-align: left;
                text-indent: -9999px;
                cursor: pointer;
                z-index: 2;
                top: 0;
                left: 0;
            }

                .audioplayer-playpause a {
                    display: block;
                }

            .audioplayer-stopped .audioplayer-playpause a {
                width: 18px;
                height: 25px;
                content: "";
                position: absolute;
                top: 30%;
                left: 50%;
                margin: -0.5em 0 0 -0.25em;
                background: url(images/icon_audio_unread26f1f1.png) no-repeat;
                background-size: 100%;
            }

            .audioplayer-playing .audioplayer-playpause a {
                width: 18px;
                height: 25px;
                content: "";
                position: absolute;
                top: 30%;
                left: 50%;
                margin: -0.5em 0 0 -0.25em;
                background: url(images/icon_audio_unread26f1f1.png) no-repeat;
                background-size: 100%;
                -webkit-animation: audio_playing 1s infinite;
            }

            @-webkit-keyframes audio_playing {
                30% {
                    background-image: url(images/icon_audio_reading_126f1f1.png);
                }

                31% {
                    background-image: url(images/icon_audio_reading_226f1f1.png);
                }

                61% {
                    background-image: url(images/icon_audio_reading_226f1f1.png);
                }

                62% {
                    background-image: url(images/icon_audio_reading_326f1f1.png);
                }

                100% {
                    background-image: url(images/icon_audio_reading_326f1f1.png);
                }
            }

            .audioplayer-time {
                width: 4.375em;
                height: 100%;
                line-height: 2.375em;
                text-align: center;
                z-index: 2;
                top: 0;
            }

            .audioplayer-time-current {
                left: 1em;
            }

            .audioplayer-time-duration {
                border-right: 1px solid #555;
                border-right-color: rgba(255,255,255,.1);
                right: .5em;
                margin-top: 1.5em;
            }

            .audioplayer-bar {
                height: .2em;
                background-color: #222;
                cursor: pointer;
                z-index: 1;
                top: 50%;
                right: 5em;
                left: 3em;
                margin-top: 1.6em;
            }

                .audioplayer-bar div {
                    width: 0;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }

            .audioplayer-bar-loaded {
                background-color: #333;
                z-index: 1;
            }

            .audioplayer-bar-played {
                background: #007fd1;
                z-index: 2;
            }
        </style>
        <div style="display: block;">
            <audio class="edui-faked-audio" title="我的语音启用啦！" src="http://edoctorcorp.med9200.com/upload/media/talk.mp3" preload="auto" style="display: none;"></audio>
        </div>
        <script type="text/javascript" src="http://edoctorcorp.med9200.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="http://localhost:38724/HTML/ueditor/dialogs/audio/audioplayer.js"></script>
        <script type="text/javascript">$(function () { $(".playAutdio").find("audio").audioPlayer({ classPrefix: "audioplayer", strPlay: "Play", strPause: "Pause", title: 我的语音启用啦！ }); $(document).on("click", ".playAutdio", function () { alert(1); if ($(".audioplayer-playing").length > 0) { $(".audioplayer-playpause a").trigger("click") } else { if ($(".audioplayer-stopped").length > 0) { $(".audioplayer-playpause a").trigger("click") } else { } } }) });</script>
    </div></p>
